<template>
	<view class="edit-container">
		<!-- 编辑表单 -->
		<view class="form-card">
			<view class="form-header">
				<text class="title">编辑联系人</text>
			</view>

			<view class="form-content">
				<!-- 用户名输入 -->
				<view class="input-item">
					<text class="label">用户名:</text>
					<input 
						class="input" 
						v-model="form.name" 
						placeholder="请输入用户名"
					/>
				</view>

				<!-- 手机号输入 -->
				<view class="input-item">
					<text class="label">手机号:</text>
					<input 
						class="input" 
						v-model="form.mobile" 
						type="number"
						placeholder="请输入手机号"
						maxlength="11"
					/>
				</view>

				<!-- 邮箱输入 -->
				<view class="input-item">
					<text class="label">Email:</text>
					<input 
						class="input" 
						v-model="form.email" 
						placeholder="请输入邮箱"
					/>
				</view>

				<!-- 保存按钮 -->
				<button class="save-btn" @click="saveEdit">
					保存修改
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					mobile: '',
					email: ''
				},
				userId: '' // 要编辑的用户ID
			};
		},
		onLoad(options) {
			// 获取列表页传递的用户ID
			this.userId = options.id;
			// 加载用户当前数据
			this.getUserInfo();
		},
		methods: {
			// 调用getUserById云函数，获取当前用户数据
			async getUserInfo() {
				uni.showLoading({ title: '加载中...' });
				try {
					const res = await uniCloud.callFunction({
						name: 'getUserById',
						data: { id: this.userId }
					});

					if (res.result?.data?.length > 0) {
						// 将用户数据填充到表单
						const user = res.result.data[0];
						this.form.name = user.name || '';
						this.form.mobile = user.mobile || '';
						this.form.email = user.email || '';
					} else {
						uni.showToast({ title: '用户数据不存在', icon: 'none' });
						setTimeout(() => uni.navigateBack(), 1500);
					}
				} catch (error) {
					uni.showToast({ title: '加载失败', icon: 'none' });
				} finally {
					uni.hideLoading();
				}
			},

			// 调用editUser云函数，保存修改
			async saveEdit() {
				// 简单校验
				if (!this.form.name || !this.form.mobile) {
					uni.showToast({ title: '用户名和手机号不能为空', icon: 'none' });
					return;
				}

				uni.showLoading({ title: '保存中...' });
				try {
					const res = await uniCloud.callFunction({
						name: 'editUser',
						data: {
							id: this.userId,
							name: this.form.name,
							mobile: this.form.mobile,
							email: this.form.email
						}
					});

					if (res.result.code === 200) {
						uni.showToast({ title: '修改成功', icon: 'success' });
						// 返回列表页并刷新
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								success: () => {
									// 通知列表页刷新数据
									uni.$emit('refreshContactList');
								}
							});
						}, 1500);
					} else {
						uni.showToast({ title: res.result.msg || '修改失败', icon: 'none' });
					}
				} catch (error) {
					uni.showToast({ title: '保存失败', icon: 'none' });
				} finally {
					uni.hideLoading();
				}
			}
		}
	};
</script>

<style scoped>
	.edit-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 40rpx 20rpx;
	}

	.form-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.form-header {
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.input {
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.save-btn {
		background-color: #41b883;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
	}
</style>